<template>
  <div>
    <div class="header_search_nav search_form">
      <div class="ipt_left">
        <el-form ref="queryForm" :model="queryParams" label-width="120px">
          <el-row>
            <el-col :span="5">
              <el-form-item label="筛选门店" prop="keyword">
                <el-input
                  class="w-200"
                  v-model="queryParams.keyword"
                  placeholder="请输入门店名称、负责人名称"
                  @keyup.enter.native="handleQuery"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="门店地区" prop="areaCode">
                <eryu-area
                  v-model="queryParams.areaCode"
                  placeholder="请输入所在区域"
                  @changeAll="changeArea"
                ></eryu-area>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="门店状态" prop="manageState">
                <el-select
                  class="w-200"
                  v-model="queryParams.manageState"
                  placeholder="请选择"
                  @keyup.enter.native="handleQuery"
                  clearable
                >
                  <el-option
                    v-for="item in manageStateOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="4">
              <el-form-item label="余额切割状态" prop="storeSplitStatus">
                <el-select
                  class="w-200"
                  v-model="queryParams.storeSplitStatus"
                  placeholder="请选择"
                  @keyup.enter.native="handleQuery"
                  clearable
                >
                  <el-option
                    v-for="item in storeSplitStatusOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="斗拱开通状态" prop="storeDg">
                <el-select
                  class="w-200"
                  v-model="queryParams.storeDg"
                  placeholder="请选择"
                  @keyup.enter.native="handleQuery"
                  clearable
                >
                  <el-option
                    v-for="item in storeDgOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div class="btn_right">
        <button class="btn1" @click="handleQuery">筛选</button>
        <button class="btn2" @click="resetQuery">重置</button>
      </div>
    </div>

    <div class="nav_boxs">
      <div class="nav_item" @click="storeList()">
        <img src="../../../assets/logo/home.png" alt="" />
        <div class="desc_style">
          <div class="desc_name">门店总数</div>
          <div class="nav_count">{{ StoreNumList.totalNum }}</div>
        </div>
      </div>
      <div class="nav_item" @click="storeList('1')">
        <img src="../../../assets/logo/running.png" alt="" />
        <div class="desc_style">
          <div class="desc_name">经营中</div>
          <div class="nav_count">{{ StoreNumList.operationsNum }}</div>
        </div>
      </div>
      <div class="nav_item" @click="storeList('2')">
        <img src="../../../assets/logo/zhuangxiu.png" alt="" />
        <div class="desc_style">
          <div class="desc_name">装修中</div>
          <div class="nav_count">{{ StoreNumList.decorateNum }}</div>
        </div>
      </div>
      <div class="nav_item" @click="storeList('3')">
        <img src="../../../assets/logo/close.png" alt="" />
        <div class="desc_style">
          <div class="desc_name">闭店</div>
          <div class="nav_count">{{ StoreNumList.closeNum }}</div>
        </div>
      </div>

      <button class="flushed" @click="Flushed" type="primary">刷新缓存</button>
    </div>

    <!-- 商品列表 -->
    <div class="navBoxs">
      <div class="table_card_nav">
        <div class="table_card" v-loading="loading">
          <div
            class="table_card_item"
            v-for="(item, index) in StoreList"
            :key="index"
          >
            <div @click="StoreInfo(item)">
              <div class="store_name">{{ item.name }}</div>
              <div class="store_status">
                门店状态<span class="status">{{
                  manageStateObj[item.manageState]
                }}</span>
              </div>
              <div class="leader">
                门店负责人<span class="leader_name">{{ item.leaderName }}</span>
              </div>

              <div class="managerBox">
                <div class="managerPro">
                  管理费比例<span class="text">{{ item.managerPro }}</span>
                </div>
                <div
                  class="UpdateManager"
                  @click.stop="UpdateManagerCost(item)"
                >
                  修改管理费比例
                </div>
              </div>

              <div class="openDate">
                开业时间<span class="dateTime">{{ item.storeOpenDate }}</span>
                <span
                  style="margin-left: 5px; cursor: pointer"
                  @click.stop="OPenDateTime(item)"
                  >修改开业时间</span
                >
              </div>

              <div class="expirationDate">
                有效期<span class="expirationTime">{{
                  item.storeExpireDate
                }}</span>
                <span
                  style="margin-left: 5px; cursor: pointer"
                  @click.stop="ExpirationTime(item)"
                  >修改有效期</span
                >
              </div>

              <div class="actionBox">
                <div
                  class="LimitMac"
                  @click.stop="LimitMac(item.id)"
                  v-if="item.macStatus === 'N'"
                >
                  限制mac
                </div>
                <div
                  class="LimitMac"
                  @click.stop="CancleMac(item.id)"
                  v-if="item.macStatus === 'Y'"
                >
                  取消mac
                </div>
                <!-- <div
                  class="storeSplit"
                  @click.stop="StoreSplit(item, 'Y')"
                  v-if="item.storeSplitStatus === 'N'"
                >
                  切割余额
                </div> -->
                <!-- <div
                  class="CancleSplit"
                  @click.stop="StoreSplit(item, 'N')"
                  v-if="item.storeSplitStatus === 'Y'"
                >
                  取消切割
                </div> -->
              </div>

              <div class="leader">
                手机号<span class="leader_iphone">{{ item.leaderMobile }}</span>
              </div>

              <div class="leader">
                美团ID<span class="leader_iphone">{{ item.storeMtId }}</span>
                <span
                  style="margin-left: 15px; cursor: pointer"
                  @click.stop="UpdatemtDy(item)"
                  >修改</span
                >
              </div>

              <div class="leader">
                抖音ID<span class="leader_iphone">{{ item.storeDyId }}</span>
              </div>

              <div class="leader" @click.stop="StoreSplit(item)">
                新提成：<span class="leader_iphone">{{
                  storeSplitStatusObj[item.storeSplitStatus]
                }}</span>
              </div>

              <div class="leader">
                斗拱开通状态：<span class="leader_iphone">{{
                  item.storeDgStr
                }}</span>
              </div>

              <div class="leader" v-if="item.storeSplitStatus === 'Y'">
                日期时间:<span class="leader_iphone">{{
                  item.storeSplitTime
                }}</span>
              </div>

              <div class="bottom_foot">
                <div class="Direct" v-if="!!item.deptState">
                  {{ deptStateObj[item.deptState] }}
                </div>
                <div class="right_action">
                  <div class="space" v-if="!item.deptState"></div>
                  <el-button
                    size="mini"
                    type="text"
                    v-for="(items, indexs) in manageStateButs"
                    :key="indexs"
                    :disabled="items.value === item.manageState ? true : false"
                    @click.stop="changeStatus(item, items)"
                  >
                    {{ items.label }}
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div>
      <el-dialog
        title="门店详情"
        :visible.sync="StoresdialogVisible"
        width="800px"
        :before-close="StoreshandleClose"
        class="no-dialog-padding"
      >
        <div class="storeInfo">
          <span>
            <div class="basicInfo">
              <!-- storeItemObj -->
              <div class="StoreName">{{ storeItemObj.name }}</div>

              <div class="topStore">
                <div class="StoreStatus">
                  门店状态：{{ manageStateObj[storeItemObj.manageState] }}
                </div>
                <!-- <div class="phoneNumber">
                  手机号：{{ storeItemObj.leaderMobile }}
                </div> -->
                <div class="runStores">
                  门店类型：{{ deptStateObj[storeItemObj.deptState] }}
                </div>
              </div>

              <!-- <div class="fzpeople">
                <div class="storePerson">
                  门店负责人：{{ storeItemObj.leaderName }}
                </div>
              </div> -->
              <div class="IptBox">
                <el-form
                  :model="ruleForm"
                  :rules="rules"
                  ref="ruleForm"
                  label-width="100px"
                  class="demo-ruleForm"
                >
                  <el-row>
                    <el-col>
                      <div class="storePerson">
                        <el-form-item label="门店负责人：" prop="id">
                          <el-select
                            v-model="ruleForm.id"
                            placeholder="请选择"
                            clearable
                            class="w-300"
                            filterable
                            @change="SelectLeader()"
                          >
                            <el-option
                              v-for="item in users"
                              :key="item.id"
                              :label="item.nickname"
                              :value="item.id"
                            />
                          </el-select>
                        </el-form-item>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="24">
                    <el-col :span="8">
                      <el-form-item label="昵称" prop="nickname">
                        <el-input
                          class="w-160"
                          v-model="ruleForm.nickname"
                          placeholder="请输入昵称"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="手机号" prop="mobile">
                        <el-input
                          class="w-160"
                          v-model="ruleForm.mobile"
                          placeholder="请输入手机号"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="密码" prop="passWord">
                        <el-input
                          class="w-160"
                          v-model="ruleForm.passWord"
                          placeholder="请输入密码"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </div>

            <div>
              <div class="actionRecords">操作记录</div>
              <div class="recordsbox">
                <el-table :data="OpenStoreList" style="width: 100%">
                  <el-table-column
                    prop="creatorName"
                    label="操作人名称"
                    width="180"
                  >
                  </el-table-column>
                  <el-table-column prop="reason" label="原因">
                  </el-table-column>
                  <el-table-column prop="createTime" label="时间">
                  </el-table-column>
                  <el-table-column
                    prop="beforeStateName"
                    label="改变前的门店经营状态"
                    width="180"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="afterStateName"
                    label="改变后的门店经营状态"
                    width="180"
                  >
                  </el-table-column>
                </el-table>
                <pagination
                  :total="total2"
                  :page.sync="StorehistoryParams.pageNo"
                  :limit.sync="StorehistoryParams.pageSize"
                  @pagination="getStoreInfoList"
                />
              </div>
            </div>
          </span>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="StoreshandleClose">取 消</el-button>
          <el-button type="primary" @click="SubmitStores">确 定</el-button>
        </span>
      </el-dialog>
    </div>

    <!-- 修改开业时间 -->
    <el-dialog
      title="修改开业时间"
      :visible.sync="OpenDatedialogVisible"
      width="30%"
      :before-close="OpenDateHandleClose"
    >
      <span>
        <el-form
          :model="OpenDateRuleForm"
          :rules="OpenDateRules"
          ref="OpenDateRuleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="门店" prop="StoreName">
            <el-input v-model="OpenDateRuleForm.StoreName" disabled></el-input>
            <!-- <el-select
              v-model="OpenDateRuleForm.storeId"
              placeholder="请选择"
              filterable
              class="w-100"
            >
              <el-option
                v-for="(item, index) in $store.state.user.stores"
                :key="index"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select> -->
          </el-form-item>
          <el-form-item label="开业时间" prop="storeOpenDate">
            <el-date-picker
              v-model="OpenDateRuleForm.storeOpenDate"
              type="date"
              placeholder="选择日期"
              class="w-100"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="OpenDateHandleClose">取 消</el-button>
        <el-button type="primary" @click="OpenDateHandleSave">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改有效期 -->
    <el-dialog
      title="修改有效期"
      :visible.sync="ExpirationDateVisible"
      width="30%"
      :before-close="ExpirationDateClose"
    >
      <span>
        <el-form
          :model="ExpirationDateRuleForm"
          :rules="ExpirationDateRules"
          ref="ExpirationDateRuleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="门店" prop="StoreName">
            <el-input
              v-model="ExpirationDateRuleForm.StoreName"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="有效期" prop="storeExpireDate">
            <el-date-picker
              v-model="ExpirationDateRuleForm.storeExpireDate"
              type="date"
              placeholder="选择日期"
              class="w-100"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="ExpirationDateClose">取 消</el-button>
        <el-button type="primary" @click="ExpirationDateSave">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改管理费比例 -->
    <el-dialog
      title="修改管理费比例"
      :visible.sync="ManagerdialogVisible"
      width="30%"
      :before-close="CancleManager"
    >
      <span>
        <el-form
          :model="ManagerForm"
          :rules="ManagerRules"
          ref="ManagerForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="门店" prop="StoreName">
            <el-input v-model="ManagerForm.StoreName" disabled></el-input>
          </el-form-item>
          <el-form-item label="管理费比例" prop="managerPro">
            <div class="IptManager">
              <el-input-number
                v-model="ManagerForm.managerPro"
                :min="0"
                :max="1000000"
                :precision="0"
                label="请输入管理费比例"
                :controls="false"
                class="w-100 text-left"
              ></el-input-number>
              <div class="managerProIcon">%</div>
            </div>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="CancleManager">取 消</el-button>
        <el-button type="primary" @click="SubmitManager">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 切割余额 -->
    <el-dialog
      :title="titles"
      :visible.sync="storeSplitdialogVisible"
      width="30%"
      :before-close="CancleStoreSplit"
    >
      <span>
        <el-form
          :model="storeSplitForm"
          :rules="storeSplitRules"
          ref="storeSplitForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="门店" prop="StoreName">
            <el-input v-model="storeSplitForm.StoreName" disabled></el-input>
          </el-form-item>
          <el-form-item label="余额切割" prop="storeSplitStatus">
            <el-select
              v-model="storeSplitForm.storeSplitStatus"
              placeholder="请选择"
              class="w-100"
            >
              <el-option
                v-for="item in storeSplitStatusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="CancleStoreSplit">取 消</el-button>
        <el-button type="primary" @click="SubmitStoreSplit">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改美团ID 抖音ID -->
    <el-dialog
      title="修改美团/抖音ID"
      :visible.sync="mtDydialogVisible"
      width="30%"
      :before-close="CanclemtDy"
    >
      <span>
        <el-form
          :model="mtDyForm"
          :rules="mtDyRules"
          ref="mtDyForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="门店" prop="storeName">
            <el-input v-model="mtDyForm.storeName" disabled></el-input>
          </el-form-item>
          <el-form-item label="美团ID" prop="storeMtId">
            <el-input
              v-model="mtDyForm.storeMtId"
              placeholder="请输入美团ID"
            ></el-input>
          </el-form-item>
          <el-form-item label="抖音ID" prop="storeDyId">
            <el-input
              v-model="mtDyForm.storeDyId"
              placeholder="请输入抖音ID"
            ></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="CanclemtDy">取 消</el-button>
        <el-button type="primary" @click="SubmitmtDy">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 新题成 -->
    <el-dialog
      title="新提成"
      :visible.sync="CutBalanceVisible"
      width="30%"
      :before-close="CancleCutBalance"
    >
      <span>
        <el-form
          :model="CutBalanceForm"
          :rules="CutBalanceRules"
          ref="CutBalanceForm"
          label-width="130px"
          class="demo-ruleForm"
        >
          <el-form-item label="新提成计算状态" prop="storeSplitStatus">
            <el-select
              v-model="CutBalanceForm.storeSplitStatus"
              placeholder="请选择"
              class="w-100"
            >
              <el-option
                v-for="item in storeSplitStatusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期时间" prop="storeSplitTime">
            <el-date-picker
              v-model="CutBalanceForm.storeSplitTime"
              type="datetime"
              placeholder="选择日期时间"
              class="w-100"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="CancleCutBalance">取 消</el-button>
        <el-button type="primary" @click="SubmitCutBalance">确 定</el-button>
      </span>
    </el-dialog>
  </div>
  <!-- </div> -->
</template>

<script>
import {
  getStoreInfoList,
  getStoreNum,
  updateManagestate,
  getOpenPage,
  editStoreManagerUser,
  getUerAllList,
  OpenDate,
  FlushCache,
  EditExpireDate,
  UpdateManagerPro,
  SplitCard,
  storeDyId,
  UpdatemtDyAction,
} from "@/api/business/stores";
import { EditMacStatus } from "@/api/bpm/maclimit";
import { phoneTest } from "@/utils/regular";
export default {
  name: "EryuoaStoreFrontendClientlist",

  data() {
    return {
      CutBalanceVisible: false,
      CutBalanceForm: {
        storeId: "",
        storeSplitStatus: "",
        storeSplitTime: "",
      },
      CutBalanceRules: {
        storeSplitStatus: [
          { required: true, message: "请选择", trigger: "blur" },
        ],
        storeSplitTime: [
          { required: true, message: "请选择", trigger: "blur" },
        ],
      },
      storeSplitStatusOptions: [
        {
          value: "Y",
          label: "生效",
        },
        {
          value: "N",
          label: "不生效",
        },
      ],

      storeSplitStatusObj: {
        Y: "生效",
        N: "不生效",
      },

      storeDgStrObj: {
        Y: "已开通",
        N: "未开通",
      },

      mtDydialogVisible: false,
      mtDyForm: {
        storeDyId: "",
        storeId: "",
        storeMtId: "",
      },
      mtDyRules: {
        storeId: [{ required: true, message: "请选择门店", trigger: "blur" }],
        storeMtId: [
          { required: true, message: "请输入美团ID", trigger: "blur" },
        ],
        storeDyId: [
          { required: true, message: "请输入抖音ID", trigger: "blur" },
        ],
      },

      storeSplitdialogVisible: false, // 切割余额
      storeSplitForm: {
        storeId: "",
        StoreName: "",
        storeSplitStatus: "",
      },
      storeSplitRules: {
        storeId: [{ required: true, message: "请选择门店", trigger: "blur" }],
        storeSplitStatus: [
          { required: true, message: "请选择余额切割状态", trigger: "blur" },
        ],
      },
      titles: "",
      ManagerdialogVisible: false, // 管理费比例
      ManagerForm: {
        managerPro: "", // 管理费比例
        storeId: "",
        StoreName: "",
      },
      ManagerRules: {
        storeId: [{ required: true, message: "请选择门店", trigger: "blur" }],
        managerPro: [
          { required: true, message: "请输入管理费比例", trigger: "blur" },
        ],
      },
      ExpirationDateVisible: false, // 有效期
      ExpirationDateRuleForm: {
        StoreName: "",
        storeId: "",
        storeExpireDate: "", // 有效日期(yyyy-MM-dd)
      },
      ExpirationDateRules: {
        storeId: [{ required: true, message: "请选择门店", trigger: "blur" }],
        storeExpireDate: [
          { required: true, message: "请选择有效期", trigger: "blur" },
        ],
      },

      OpenDatedialogVisible: false,
      OpenDateRuleForm: {
        StoreName: "",
        storeId: "",
        storeOpenDate: "", // 开店时间(yyyy-MM-dd)
      },
      OpenDateRules: {
        storeId: [{ required: true, message: "请选择门店", trigger: "blur" }],
        storeOpenDate: [
          { required: true, message: "请选择开业时间", trigger: "blur" },
        ],
      },

      ruleForm: {
        id: "",
        deptId: "",
        mobile: "",
        nickname: "",
        passWord: "",
      },
      rules: {
        nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            validator: this.checkPhone,
            trigger: "blur",
          },
        ],
        // passWord: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      StoreList: [],
      StoreNumList: {},

      StoresdialogVisible: false,

      OpenStoreList: [], // 操作记录

      storeDgOption: [
        {
          value: "Y",
          label: "已开通",
        },
        {
          value: "N",
          label: "未开通",
        },
      ],

      manageStateOptions: [
        // {
        //   value: "0",
        //   label: "全部",
        // },
        {
          value: "1",
          label: "经营中",
        },
        {
          value: "2",
          label: "装修中",
        },
        {
          value: "3",
          label: "闭店",
        },
      ],

      // storeSplitStatusOptions: [
      //   {
      //     value: "Y",
      //     label: "已切割",
      //   },
      //   {
      //     value: "N",
      //     label: "未切割",
      //   },
      // ],

      manageStateButs: [
        {
          value: 1,
          label: "经营中",
        },
        {
          value: 2,
          label: "装修中",
        },
        {
          value: 3,
          label: "闭店",
        },
      ],

      manageStateObj: {
        1: "经营中",
        2: "装修中",
        3: "闭店",
      },

      deptStateObj: {
        1: "直营",
        2: "加盟",
        3: "自主经营",
        4: "非连锁",
      },

      newClientRules: {
        name: [{ required: true, message: "请输入客户姓名", trigger: "blur" }],
        iphone1: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入6位数消费密码", trigger: "blur" },
        ],
        sex: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        source: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
      },

      // 查询参数
      queryParams: {
        areaCode: "",
        cityCode: "",
        keyword: "",
        manageState: "",
        provincesCode: "",
        storeDg: "", // 斗拱开通状态
        storeSplitStatus: "", // 门店切割状态
      },
      total: 0,
      total2: 0,

      StorehistoryParams: {
        pageNo: 1,
        pageSize: 10,
        storeId: "",
      },

      storeItemObj: {},
      users: [],
      Userobj: {},
    };
  },

  mounted() {},

  created() {
    this.getList();
    this.getStoreNumList();
  },

  methods: {
    // 取消余额切割
    CancleCutBalance() {
      this.resetFormData("CutBalanceForm");
      this.$nextTick(() => {
        this.CutBalanceVisible = false;
      });
    },

    // 确定余额切割
    SubmitCutBalance() {
      this.$refs["CutBalanceForm"].validate((valid) => {
        if (valid) {
          SplitCard({
            storeId: this.CutBalanceForm.storeId,
            storeSplitStatus: this.CutBalanceForm.storeSplitStatus,
            storeSplitTime: this.CutBalanceForm.storeSplitTime,
          })
            .then((res) => {
              const { code, data } = res;
              if (code === 0) {
                this.$message.success("操作成功");
                this.getList();
                this.CancleCutBalance();
              }
            })
            .catch((err) => {});
        }
      });
    },

    // 修改美团ID 抖音ID
    UpdatemtDy(item) {
      this.mtDydialogVisible = true;
      this.mtDyForm.storeId = item.id;
      this.mtDyForm.storeName = item.name;
      this.mtDyForm.storeDyId = item.storeDyId;
      this.mtDyForm.storeMtId = item.storeMtId;
    },
    CanclemtDy() {
      this.resetFormData("mtDyForm");
      this.$nextTick(() => {
        this.mtDydialogVisible = false;
      });
    },
    SubmitmtDy() {
      this.$refs["mtDyForm"].validate((valid) => {
        if (valid) {
          UpdatemtDyAction({
            storeId: this.mtDyForm.storeId,
            storeDyId: this.mtDyForm.storeDyId,
            storeMtId: this.mtDyForm.storeMtId,
          })
            .then((res) => {
              const { code, data } = res;
              if (code === 0) {
                this.$message.success("操作成功");
                this.getList();
                this.CanclemtDy();
              }
            })
            .catch((err) => {});
        } else {
        }
      });
    },

    // 余额切割 取消
    CancleStoreSplit() {
      this.resetFormData("storeSplitForm");
      this.$nextTick(() => {
        this.storeSplitdialogVisible = false;
      });
    },
    SubmitStoreSplit() {
      // this.$refs['storeSplitForm'].validate((valid) => {
      //     if (valid) {
      //       SplitCard({
      //         storeId:this.storeSplitForm.storeId,
      //         storeSplitStatus:this.storeSplitForm.storeSplitStatus,
      //       }).then(res=>{
      //         const {code,data} = res;
      //         if(code === 0){
      //           this.$message.success("操作成功");
      //           this.getList();
      //           this.CancleStoreSplit();
      //         }
      //       }).catch(err=>{
      //       });
      //     } else {
      //     }
      //   });
    },

    // 取消切割
    CancleSplitAction(item) {
      // this.storeSplitdialogVisible = true;
      // this.titles = "取消余额切割";
      // this.storeSplitForm.storeId = item.id;
      // this.storeSplitForm.StoreName = item.name;
    },

    // 余额切割
    StoreSplit(item) {
      this.CutBalanceVisible = true;
      this.CutBalanceForm.storeId = item.id;
      this.CutBalanceForm.storeSplitStatus = item.storeSplitStatus;
      this.CutBalanceForm.storeSplitTime = item.storeSplitTime;
      // this.$confirm(
      //   "此操作将" + (storeSplitStatus === "Y" ? "余额切割" : "取消切割") + "?",
      //   "提示",
      //   {
      //     confirmButtonText: "确定",
      //     cancelButtonText: "取消",
      //     type: "warning",
      //   }
      // )
      //   .then(() => {
      //     SplitCard({
      //       storeId: item.id,
      //       storeSplitStatus: storeSplitStatus,
      //     })
      //       .then((res) => {
      //         const { code, data } = res;
      //         if (code === 0) {
      //           this.$message.success("操作成功");
      //           this.getList();
      //           this.CancleStoreSplit();
      //         }
      //       })
      //       .catch((err) => {});
      //   })
      //   .catch(() => {});
      // console.log("item",item);
      // this.storeSplitdialogVisible = true;
      // this.titles = "余额切割";
      // this.storeSplitForm.storeId = item.id;
      // this.storeSplitForm.StoreName = item.name;
    },

    UpdateManagerCost(item) {
      this.ManagerdialogVisible = true;
      // console.log("aaaaaaa",item);
      this.ManagerForm.storeId = item.id;
      this.ManagerForm.StoreName = item.name;
    },

    CancleManager() {
      this.resetFormData("ManagerForm");
      this.ManagerdialogVisible = false;
    },

    SubmitManager() {
      this.$refs["ManagerForm"].validate((valid) => {
        if (valid) {
          UpdateManagerPro(this.ManagerForm)
            .then((res) => {
              const { code } = res;
              if (code === 0) {
                this.$message.success("操作成功");
                this.CancleManager();
                this.getList();
              }
            })
            .catch((err) => {});
        } else {
          return false;
        }
      });
    },

    // 刷新缓存
    Flushed() {
      FlushCache({})
        .then((res) => {
          const { code } = res;
          if (code === 0) {
            this.$message.success("操作成功");
            this.getList();
          }
        })
        .catch((err) => {});
    },

    OPenDateTime(item) {
      this.OpenDatedialogVisible = true;
      console.log(item);
      this.OpenDateRuleForm.StoreName = item.name;
      this.OpenDateRuleForm.storeId = item.id;
    },

    // 修改有效期
    ExpirationTime(item) {
      this.ExpirationDateVisible = true;
      this.ExpirationDateRuleForm.StoreName = item.name;
      this.ExpirationDateRuleForm.storeId = item.id;
    },

    OpenDateHandleClose() {
      this.resetFormData("OpenDateRuleForm");
      this.$nextTick(() => {
        this.OpenDatedialogVisible = false;
      });
    },
    OpenDateHandleSave() {
      this.$refs["OpenDateRuleForm"].validate((valid) => {
        if (valid) {
          OpenDate(this.OpenDateRuleForm)
            .then((res) => {
              const { code } = res;
              if (code === 0) {
                this.$message.success("操作成功");
                this.OpenDateHandleClose();
                this.getList();
              }
            })
            .catch((err) => {});
        } else {
          return false;
        }
      });
    },

    // 修改有效期 确定
    ExpirationDateSave() {
      this.$refs["ExpirationDateRuleForm"].validate((valid) => {
        if (valid) {
          EditExpireDate(this.ExpirationDateRuleForm)
            .then((res) => {
              const { code } = res;
              if (code === 0) {
                this.$message.success("操作成功");
                this.ExpirationDateClose();
                this.getList();
              }
            })
            .catch((err) => {});
        } else {
          return false;
        }
      });
    },

    ExpirationDateClose() {
      this.resetFormData("ExpirationDateRuleForm");
      this.$nextTick(() => {
        this.ExpirationDateVisible = false;
      });
    },

    LimitMac(id) {
      this.$confirm("此操作将限制Mac, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          EditMacStatus({
            id: id,
          })
            .then((Res) => {
              this.$message({
                type: "success",
                message: "操作成功!",
              });
              this.getList();
            })
            .catch((err) => {});
        })
        .catch(() => {});
    },

    CancleMac(id) {
      this.$confirm("此操作将取消限制Mac, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          EditMacStatus({
            id: id,
          })
            .then((Res) => {
              this.$message({
                type: "success",
                message: "操作成功!",
              });
              this.getList();
            })
            .catch((err) => {});
        })
        .catch(() => {});
    },

    SelectLeader() {
      let item = this.Userobj[this.ruleForm.id];
      this.ruleForm.mobile = item.mobile;
      this.ruleForm.nickname = item.nickname;
    },

    checkPhone(rule, value, callback) {
      if (!phoneTest(value) && !!value) {
        callback(new Error("请输入正确手机号"));
      } else {
        callback();
      }
    },
    // 操作记录
    getStoreInfoList() {
      getOpenPage({
        storeId: this.storeItemObj.id,
        pageNo: this.StorehistoryParams.pageNo,
        pageSize: this.StorehistoryParams.pageSize,
      })
        .then((res) => {
          console.log(res);
          const { code, data } = res;
          if (code === 0) {
            this.OpenStoreList = data.list;
            this.total2 = data.total;
          }
        })
        .catch((err) => {});
    },

    StoreInfo(item) {
      console.log(item);
      this.ruleForm.deptId = item.deptId;
      this.ruleForm.id = item.leaderUserId;
      this.ruleForm.mobile = item.leaderMobile;
      this.ruleForm.nickname = item.leaderName;
      this.storeItemObj = JSON.parse(JSON.stringify(item));
      this.StoresdialogVisible = true;
      this.getStoreInfoList();
      this.getUser();
    },

    getUser() {
      // 获得用户列表
      getUerAllList({ inStatusStr: "4,5" }).then((response) => {
        this.users = response.data;
        let obj = {};
        for (let i = 0; i < this.users.length; i++) {
          let items = this.users[i];
          obj[items.id] = items;
        }
        this.Userobj = obj;
        console.log(this.Userobj);
      });
    },

    StoreshandleClose() {
      this.resetFormData("ruleForm");
      this.$nextTick(() => {
        this.StoresdialogVisible = false;
      });
    },

    SubmitStores() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          editStoreManagerUser(this.ruleForm)
            .then((res) => {
              const { code } = res;
              if (code === 0) {
                this.getList();
                this.$message.success("操作成功");
                this.StoreshandleClose();
              }
            })
            .catch((err) => {});
          // alert("submit!");
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },

    storeList(type) {
      this.queryParams.manageState = type;
      this.handleQuery();
    },

    changeArea(obj) {
      this.queryParams["provincesCode"] = obj.provinces;
      this.queryParams["cityCode"] = obj.city;
    },
    // 筛选
    handleQuery() {
      this.getList();
      this.getStoreNumList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        areaCode: "",
        cityCode: "",
        keyword: "",
        manageState: "",
        provincesCode: "",
      };
      this.handleQuery();
    },

    // 表单重置
    resetFormData(formName) {
      console.log(this.$refs[formName]);
      this.$refs[formName].resetFields();
    },

    getList() {
      this.loading = true;
      getStoreInfoList(this.queryParams)
        .then((res) => {
          console.log(res);
          this.loading = false;
          const { code, data } = res;
          if (code === 0) {
            this.StoreList = data;
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    // 获得门店数量统计列表
    getStoreNumList() {
      this.loading = true;
      getStoreNum()
        .then((res) => {
          console.log(res);
          this.loading = false;
          const { code, data } = res;
          if (code === 0) {
            this.StoreNumList = data;
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    changeStatus(item, items) {
      let sratusObj = {
        1: "经营中",
        2: "装修中",
        3: "闭店",
      };

      this.$prompt(
        "请输入原因",
        "你确定要将将改门店状态设置为" + sratusObj[items.value] + "吗?",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputPattern: /^.+$/,
          inputErrorMessage: "请输入原因",
        }
      )
        .then(({ value }) => {
          updateManagestate({
            storeId: item.id,
            manageState: items.value,
            reason: value,
          })
            .then((res) => {
              const { code, data } = res;
              if (code === 0) {
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.getList();
              }
            })
            .catch((err) => {});
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.goodTop {
  width: 100%;
  height: 48px;
  background: #ffffff;
  display: flex;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
  line-height: 48px;
  padding-left: 16px;
  .good_list {
    margin-right: 32px;
  }

  .good_active {
    color: #0052d9;
    border-bottom: 1px solid #0052d9;
  }
}

.w-200 {
  width: 200px;
  background: #ffffff;
  border-radius: 4px;
}

.client_name {
  font-size: 14px;
  font-weight: 400;
  color: #0052d9;
}

.give {
  height: 40px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  margin-top: 40px;
  line-height: 40px;
}

.el-form-item {
  margin-bottom: 20px;
}

.recharge_form {
  padding: 10px 24px;
}

.memberName {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
}
.el_row_item {
  margin-bottom: 10px;
}
.el_row_date {
  margin-top: 20px;
}
.el_row_reason {
  margin-top: 10px;
}

.el_row_date {
  .el-form-item {
    margin-bottom: 0px;
  }
}

.separate_left {
  width: 1px;
  height: 14px;
  // background: #e9e9e9;
  margin-right: 12px;
}
.separate_right {
  width: 1px;
  height: 14px;
  // background: #e9e9e9;
  margin-left: 12px;
}

.nav_boxs {
  display: flex;
  .nav_item {
    display: flex;
    align-items: center;
    padding-left: 24px;
    img {
      width: 50px;
      height: 50px;
      border-radius: 10px;
      background-color: #e9f3ff;
      // border: 1px solid #e9f3ff;
    }
    .desc_style {
      margin-left: 5px;
      font-size: 13px;
      .desc_name {
        color: #999a9c;
      }
      .nav_count {
        margin-top: 5px;
      }
    }
  }

  .flushed {
    position: absolute;
    top: 280px;
    right: 30px;
    height: 32px;
    background: #0052d9;
    background-color: #0052d9;
    color: #fff;
    border-radius: 5px;
    text-align: center;
    font-size: 14px;
    border: 1px solid #0052d9;
    height: 35px;
  }
}

.navBoxs {
  padding-right: 24px;
}
.table_card {
  padding: 24px;
  // width: 100%;
  display: inline-block;

  display: flex;
  flex-wrap: wrap;
  width: 1624px;
  .table_card_item {
    float: left;
    margin-right: 12px;
    margin-bottom: 12px;
    width: 250px;

    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    .store_name {
      font-size: 17px;
      font-weight: bolder;
      padding: 20px 0px 10px 20px;
      cursor: pointer;
    }
    .store_status {
      color: #ccc;
      padding: 0px 0px 10px 20px;
      .status {
        color: #333;
        padding-left: 20px;
      }
    }

    .openDate {
      padding: 0px 0px 10px 20px;
      color: #ccc;
      .dateTime {
        margin-left: 30px;
        color: #333;
      }
    }

    .managerBox {
      display: flex;
      padding: 0px 0px 10px 20px;
      color: #ccc;
      .managerPro {
        margin-right: 40px;
        .text {
          color: #000;
          padding-left: 12px;
        }
      }
      .UpdateManager {
        cursor: pointer;
      }
    }

    .expirationDate {
      padding: 0px 0px 10px 20px;
      color: #ccc;
      .expirationTime {
        margin-left: 30px;
        color: #333;
      }
    }

    .leader {
      padding: 0px 0px 10px 20px;
      color: #ccc;
      .leader_name {
        color: #333;
        padding-left: 10px;
      }
      .leader_iphone {
        color: #333;
        padding-left: 10px;
      }
    }

    .bottom_foot {
      display: flex;
      justify-content: space-between;
      padding-bottom: 10px;
      .Direct {
        height: 25px;
        line-height: 25px;
        border: 1px solid #ccc;
        padding: 0 10px;
        margin-left: 20px;
      }
      .right_action {
        display: flex;
        align-items: center;
        color: #0079fe;
        margin-right: 24px;
        .fitment {
          margin-right: 20px;
        }
        .space {
          margin-left: 20px;
        }
      }
    }
  }
}

.storeInfo {
  padding-left: 24px;
  .basicInfo {
    .StoreName {
      font-weight: bold;
      height: 25px;
      font-size: 18px;
      font-weight: bold;
      color: #000000;
      line-height: 25px;
      text-align: center;
      margin-top: 31px;
    }

    .IptBox {
      margin-top: 20px;
      margin-right: 80px;
    }

    .storePerson {
      margin-top: 5px;
      margin-left: 0px;
    }

    .topStore {
      display: flex;
      justify-content: space-between;
      padding: 0 100px;
      // margin-top: 27px;
      font-size: 14px;
      font-weight: bolder;
      .runStores {
        margin-left: 100px;
        font-weight: bold;
        font-size: 14px;
        margin-top: 9px;
      }
    }

    .StoreStatus {
      margin-top: 5px;
    }

    .phoneNumber {
      margin-top: 5px;
    }
  }
  .actionRecords {
    font-size: 14px;
    margin-top: 30px;
    font-weight: bold;
    color: #000000;
    margin-bottom: 12px;
  }

  .recordsbox {
    margin-right: 24px;
    .records {
      margin-top: 10px;
    }
  }
}
.actionBox {
  display: flex;
  .LimitMac {
    margin-left: 20px;
    margin-bottom: 10px;
    color: #000000;
    font-size: 15px;
    border: 1px solid #000;
    width: 70px;
    text-align: center;
    border-radius: 6px;
  }
  .storeSplit {
    margin-left: 20px;
    padding-top: 3px;
  }
  .CancleSplit {
    padding-top: 3px;
    margin-left: 10px;
  }
}
.IptManager {
  position: relative;
  .managerProIcon {
    position: absolute;
    top: 2px;
    right: -15px;
  }
}
</style>
